<template>
  <el-container style="height: 100vh;">
    <el-header>
      <span><i :class=iconFold @click="hide" style="margin-right: 580px;font-size: 35px;color: #D3DCE6"></i></span>
      <span class="unselectable" style="position: absolute;left: 90px;font-family: 华文彩云;color: beige;font-size: 20px"><i class='el-icon-back' style="font-size: 20px"></i>{{foldText}}</span>
      <span class="unselectable" style="position: absolute;left: 570px"><img src="../assets/logo.png" width="80px" ></span>
      <span class="unselectable" style="font-size: 40px; margin-right: 570px;font-family: 华文琥珀;color: chocolate;text-shadow: 4px 8px 4px #000000; /* 设置段落文本的阴影 */">
        末世管理者
      </span>
      <span style="position: absolute;right: 80px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px;font-size: 20px;color: #B3C0D1"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>
              <router-link to="/login">退出</router-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span style="font-size: 20px;color: #ecd300">王小虎</span>
      </span>

    </el-header>

    <el-container>
      <transition name="el-fade-in-linear">
      <el-aside width="200px" v-if="collapse" class="showImg">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)" >
          <el-menu :default-openeds="['Home']" v-show="collapse" router class="menuStyle"><!--要引入router才可以进行路由跳转-->
                <el-menu-item @click.native="menuChange('Home')">主页</el-menu-item>
                <el-menu-item @click.native="menuChange('Game')">开始游戏</el-menu-item>
                <el-menu-item @click.native="menuChange('Role')">角色管理</el-menu-item>
                <el-menu-item @click.native="menuChange('Construct')">建筑管理</el-menu-item>
          </el-menu>
          <el-menu :default-openeds="['1', '3']" v-show="collapse" class="menuStyle">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>其他</template>
              <el-menu-item index="1-1" class="menuStyle">1</el-menu-item>
              <el-menu-item index="1-2" class="menuStyle">2</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
      </el-aside>
      </transition>

      <el-main :is="currentView" style="width: 100%">
        <!--表示当前页面的子路由会在router-view里面展示-->

      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Home from './Home.vue'
import Role from './Role.vue'
import Construct from "./Construct.vue";
import Game from "./Game.vue"
export default {
  name: "Manage",
  data(){
    return{
      collapse: true,
      iconFold: 'el-icon-s-fold cursor',
      foldText: '点我隐藏菜单栏',
      currentView: 'Home'
    }
  },
  components: {
    Role,Construct,Home,Game
  },
  methods: {
    hide(){
      this.collapse = !this.collapse
      if(this.collapse){
        this.foldText = '点我隐藏菜单栏'
        this.iconFold = 'el-icon-s-fold cursor'
      }else{
        this.foldText = '点我打开菜单栏'
        this.iconFold = 'el-icon-s-unfold'
      }
    },
    menuChange(menuName){
      this.currentView = menuName
    }
  }
}
</script>



<style scoped>
.menuStyle{
  background:repeating-linear-gradient(45deg,
  grey 0,#B3C0D1 200px,#E9EEF3 60px);
}
.showImg{
  background-image: url("../assets/game2.jpg");
}
.cursor{
  cursor: pointer;
}
.el-header {
  //background-color: #B3C0D1;
  background-image: url(../assets/keji3.jpg);
  color: #333;
  //text-align: center;
  line-height: 60px;
  /*防止右边的用户被挤掉*/
  /*justify-content: space-between;
  display: flex;*/
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

/*使文字无法被选中*/
.unselectable {
  user-select: none; /* 标准的CSS3 */
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}
</style>
